<template>
  <div class="merchant-info">
    <p class="merchant-info-title">
      {{ seller.name }}
    </p>
    <div class="stars">
      <span class="star-item" :class="item" v-for="(item, index) in itemStarsClass" :key="index"></span>
    </div>
    <div class="discounts-info-header">
      <span class="border-bottom"></span>
      <span class="discounts-info-title">优惠信息</span>
      <span class="border-bottom"></span>
    </div>
    <div class="discounts-info-wrapper">
      <div class="discounts-item" v-for="item in seller.supports" :key="item.type">
        <span
        :class="{
          'decrease-icon':item.type==1,
          'discount-icon':item.type==2,
          'special-icon':item.type==3,
          'guarantee-icon':item.type==4,
          }"
          ></span>
        <p class="discounts-desc">{{ item.description }}</p>
      </div>
    </div>
    <div class="discounts-info-header merchant-announcement-header">
      <span class="border-bottom"></span>
      <span class="discounts-info-title">商家公告</span>
      <span class="border-bottom"></span>
    </div>
    <div class="merchant-announcement-wrapper">
      <p class="merchant-announcement-content">
        {{seller.bulletin}}
      </p>
    </div>
    <span class="icon-close" @click="closeM"></span>
  </div>
</template>

<script>
export default {
  name: 'MerchantInfo',
  props: ['seller'],
  data () {
    return {
      closeMI: false
    }
  },
  methods: {
    closeM () {
      this.$emit('closeMI', this.closeMI)
    }
  },
  watch: {},
  computed: {
    itemStarsClass () {
      let res = [] // 定义一个数组用来存储星星个数
      let score = Math.floor(this.seller.score * 2) / 2 // 计算星星的个数如3.2则为3   3.8则为3.5
      let hasDecimal = score % 1 !== 0 // 判断是否有小数
      let intger = Math.floor(score)
      for (let i = 0; i < intger; i++) {
        res.push('star-on')
      }
      if (hasDecimal) {
        res.push('star-half')
      }
      while (res.length < 5) {
        res.push('star-off')
      }
      return res
    }
  }
}
</script>

<style lang="stylus" scoped>
.merchant-info {
  position: fixed
  overflow: hidden
  top: 0
  left: 0
  z-index: 100
  width: 100%
  height: 100%
  backdrop-filter: blur(10px)
  background: rgba(7,17,27,.8)
  .merchant-info-title{
    font-size: 0.32rem
    font-weight 700
    color rgb(255,255,255)
    text-align center
    margin-top 1.28rem
  }
  .stars{
    display flex
    width 3.74rem
    justify-content space-between
    margin .32rem auto
    .star-item{
      width .4rem
      height .4rem
      display inline-block
      background-repeat no-repeat
      background-size cover
    }
    .star-off{
      background url('../../../assets/imgs/star24_off@2x.png')
    }
    .star-half{
      background url('../../../assets/imgs/star24_half@2x.png')
    }
    .star-on{
      background url('../../../assets/imgs/star24_on@2x.png')
    }
  }
  .discounts-info-header{
    text-align center
    margin-top .56rem
    .discounts-info-title{
      font-size: 0.32rem
      font-weight 700
      color rgb(255,255,255)
      text-align center
      margin 0 .24rem
    }
    .border-bottom{
      vertical-align middle
      width 2.24rem
      display inline-block
    }
    .border-bottom:before{
      border-color rgba(255,255,255,.6)
    }
  }
  .discounts-info-wrapper{
    margin-top .48rem
    padding 0 .72rem
    .discounts-item{
      margin-left .24rem
      display flex
      margin-bottom .24rem
      .decrease-icon{
        display inline-block
        width 0.32rem
        height 0.32rem
        background url('../../../assets/imgs/decrease_1@2x.png') no-repeat 0 0
        background-size cover
      }
      .discount-icon{
        display inline-block
        width 0.32rem
        height 0.32rem
        background url('../../../assets/imgs/discount_1@2x.png') no-repeat 0 0
        background-size cover
      }
      .special-icon{
        display inline-block
        width 0.32rem
        height 0.32rem
        background url('../../../assets/imgs/special_1@2x.png') no-repeat 0 0
        background-size cover
      }
      .guarantee-icon{
        display inline-block
        width 0.32rem
        height 0.32rem
        background url('../../../assets/imgs/guarantee_1@2x.png') no-repeat 0 0
        background-size cover
      }
      .discounts-desc{
        margin-left .12rem
        line-height .32rem
        font-size .24rem
        font-weight 200
        color #fff
      }
    }
  }
  .merchant-announcement-header{
    margin-top .56rem
  }
  .merchant-announcement-wrapper{
    padding 0 .96rem
    .merchant-announcement-content{
      font-size .24rem
      font-weight 200
      color rgb(255,255,255)
      line-height .48rem
      margin-top .48rem
    }
  }
  .icon-close {
    font-size: 0.64rem
    color: rgba(255, 255, 255, 0.5)
    position: absolute
    left: 50%
    margin-left: -0.29rem
    bottom: 0.64rem
  }

  .icon-close:before {
    content: '\e903'
  }
}
</style>
